<template>
  <div class="px-12px pt-12px pb-80px">
    <div class="flex ml-12px">
      <div
        v-for="daily in dailys"
        :key="daily.id + Math.random().toString(16).slice(2, 8)"
        class="w-200px h-54px text-white seckill"
        :class="{
          'bg-coupon': daily.id === listStore.daily?.id,
          'no-begin': daily.open_status == 0,
          end: daily.open_status == 2
        }"
      >
        <div
          v-if="daily.id === listStore.daily?.id"
          class="word-sec-kill items-center flex h-full w-full justify-center"
        >
          <div class="font-bold text-14px ml-6px">
            {{ daily.name }}
          </div>
          <div class="font-bold text-10px ml-8px">
            <div>正在秒杀</div>
            <div class="mt-6px">
              距离结束：<n-countdown :duration="listStore?.daily?.timeout" />
            </div>
          </div>
        </div>
        <div
          v-else-if="daily.open_status == 0"
          class="flex word-sec-kill w-full h-full flex items-center justify-center"
        >
          <div class="flex flex-col items-center font-medium text-16px ml-6px">
            <div class="mb-3px">{{ daily.name }}</div>
            <div>{{ daily.start }}</div>
          </div>
          <div
            class="w-58px h-20px rounded-18px text-10px color-white-opacity-7 text-center leading-20px ml-9px"
            style="border: 1px solid rgba(255, 255, 255, 0.7)"
          >
            即将开始
          </div>
        </div>
        <div
          v-else-if="daily.open_status == 2"
          class="flex word-sec-kill w-full h-full flex items-center justify-center color-secondary"
        >
          <div class="flex flex-col items-center font-medium text-16px ml-6px">
            <div class="mb-3px">{{ daily.name }}</div>
            <div>{{ daily.start }}</div>
          </div>
          <div
            class="w-58px h-20px rounded-18px text-10px color-white-opacity-7 text-center leading-20px ml-9px"
            style="border: 1px solid rgba(255, 255, 255, 0.7)"
          >
            已结束
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap mt-20px">
      <div
        v-for="(list, index) in listStore.dailySpus"
        :key="list.spu?.name"
        :class="{ 'mr-24px': (index + 1) % 4 !== 0, 'mt-24px': index > 3 }"
      >
        <product-list
          :id="list.spu?.id"
          :title="list.spu?.name"
          :img="list.spu?.imgs[0]?.url || ''"
          :score="list.spu?.score"
          :price="list.spu?.price"
          :video="list.spu?.video"
          :discount-price="list.spu?.discountPrice"
          :labels="list.spu?.sell_point"
          :sales="list.spu?.sales"
          :is-combo="listStore?.isCombo"
          @on-select="() => addProduct(list.spu, 0)"
        ></product-list>
      </div>
      <div
        v-for="(list, index) in listStore.dailyCombos"
        :key="list.name"
        :class="{
          'mr-24px': (index + 1 + listStore.dailySpus.length) % 4 !== 0,
          'mt-24px': index > 3
        }"
      >
        <product-list
          :id="list.id"
          :title="list.name"
          :img="list.imgs[0]?.url || ''"
          :score="list.score"
          :price="list.price"
          :video="list.video"
          :discount-price="list.discountPrice"
          :labels="list.sell_point"
          :sales="list.sales"
          :is-combo="1"
          @on-select="() => addProduct(list, 1)"
        ></product-list>
      </div>
    </div>
    <category v-if="showCategory" :is-combo="0" @on-close="closeCategory" />
    <category v-if="showComboCategory" :is-combo="1" @on-close="closeComboCategory" />
    <cart-col @open-cart="openCart" />
    <cart-item v-model:show="showOpenCart" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ProductList from '@renderer/components/list/index.vue'
import Category from '@renderer/components/category/index.vue'
import CartCol from '@renderer/views/mall/recommend/components/cart-col.vue'
import CartItem from '@renderer/views/mall/recommend/components/cart-item.vue'
import { useListStore } from '@renderer/store/modules/list'
import useHttp from '@renderer/utils/http'
import { useCategoryStore } from '@renderer/store/modules/category'
const listStore = useListStore()
const categoryStore = useCategoryStore()
const showCategory = ref<boolean>(false)
const showComboCategory = ref<boolean>(false)
const showOpenCart = ref<boolean>(false)
const dailys = ref<any[]>([])
onMounted(async () => {
  const { data: resCurrent } = await useHttp('/daily/c/current').get().json()
  if (resCurrent.value.code === 200) {
    listStore.setDaily(resCurrent.value.data)
  }
  const { data: res } = await useHttp('/daily/c/all').get().json()
  if (res.value.code === 200) {
    dailys.value = res.value.data
  }
})

const addProduct = async (list, isCombo) => {
  if (isCombo) {
    const { data: res } = await useHttp(`/combo/c/detail?id=${list.id}`).get().json()
    if (res.value.code === 200) {
      const { spus } = res.value.data
      categoryStore.setComboSpu(spus)
      categoryStore.setCombo(res.value.data)
      categoryStore.setComboSkus(
        spus.map((spu) => {
          return spu.skus.map((sku) => ({
            ...sku,
            discount: spu.discount
          }))
        })
      )
    }
  } else {
    await categoryStore.setSkus(list.id, list)
    categoryStore.setSpu(list)
  }
  if (isCombo) {
    showComboCategory.value = true
  } else {
    showCategory.value = true
  }
}
const closeCategory = () => (showCategory.value = false)
const closeComboCategory = () => (showComboCategory.value = false)

const openCart = () => {
  showOpenCart.value = !showOpenCart.value
}
</script>

<style scoped>
.seckill {
  transform: skew(-30deg);
  transform-origin: 50% 50%;
}
.no-begin {
  border: 2px solid #fff;
}
.end {
  border: 2px solid #ababab;
}
.word-sec-kill {
  transform: skew(30deg);
  transform-origin: 50% 50%;
}
</style>
